<template>
  <div class="report">
    <h3>创作周报</h3>
    <div class="report-limit">
      <p>仅展示最近2个月的周报与数据</p>
      <p>
        当前仅展示个人周报，查看机构周报请选择登录方式为「机构登剥」重新登录
      </p>
    </div>
    <div class="condition">
      <div class="condition-left">
        <h5>{{workReport.startTime | formatDate}}-{{workReport.endTime | formatDate}}创作周报新鲜出炉~</h5>
        <p>
          亲爱的创作者，你有一份创作者周报等待查收-<router-link
            to="/detailReport"
            style="color: #0077fa"
            >立即查看</router-link
          >
        </p>
      </div>
      <div class="condition-right">
        <p>2023-05-20 09:44</p>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import { getWorkReportApi } from "@/api/serveHome";
export default {
  data() {
    return {
      workReport: {},
    };
  },
    filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd"); 
      //  "yyyy-MM-dd hh:mm:ss"
    },
    },
  created() {
    this.getWorkReportFun();
  },
  methods: {
    getWorkReportFun() {
      getWorkReportApi().then((res) => {
        if (res.data.code == 200) {
          this.workReport = res.data.data;
        }
      });
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.report {
  width: 96%;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  margin: auto;
}
.report-limit {
  height: 50px;
  display: flex;
  color: #928d8d;
  font-size: 12px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f6f6f6;
}
.condition {
  height: 70px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f6f6f6;
}
.condition-left {
  padding: 10px 0;
  box-sizing: border-box;
  line-height: 1.8;
}
.condition-left p {
  font-size: 13px;
}
.condition-right {
  color: #a2a2a2;
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
}
</style>
